<template>
  <view>
    <view class="container">
      <!-- 导航栏 -->
      <view class="navbar">
        <view class="nav-item" :class="{ active: activeTab === 'publish' }" @click="navigateTo('publish')">
          <text>发布活动</text>
        </view>
        <view class="nav-item" :class="{ active: activeTab === 'history' }" @click="navigateTo('history')">
          <text>历史</text>
        </view>
        <view class="nav-item" :class="{ active: activeTab === 'favorites' }" @click="navigateTo('favorites')">
          <text>收藏</text>
        </view>
        <view class="nav-item" :class="{ active: activeTab === 'others' }" @click="navigateTo('others')">
          <text>其他</text>
        </view>
      </view>

     <!-- 表单 -->
       <view class="form">
         <!-- 标题 -->
         <view class="form-item">
           <text class="label">标题</text>
           <input class="input" v-model="form.title" placeholder="请输入标题(不超过20字)" />
         </view>

         <view class="divider"></view>

         <!-- 活动地点 -->
         <view class="form-item">
           <text class="label">活动地点</text>
           <input class="input" v-model="form.location" placeholder="请输入活动到达的地点" />
         </view>

         <view class="divider"></view>

         <!-- 场地号 -->
         <view class="form-item">
           <text class="label">场地号</text>
           <input class="input" v-model="form.fieldNumber" placeholder="请输入场地号" />
         </view>

		 <view class="divider"></view>

		 <!-- 活动距离 -->
		 <view class="form-item">
		   <text class="label">活动距离</text>
		   <input class="input" v-model="form.activityDistance" placeholder="请输入活动距离" />
		 </view>

         <view class="divider"></view>

		 <!-- 活动目前参与人数 -->
		 <view class="form-item">
		   <text class="label">活动目前参与人数</text>
		   <input class="input" v-model="form.signUpNumber" placeholder="请输入活动目前参与人数" />
		 </view>

		 <view class="divider"></view>

		 <!-- 活动组团人数 -->
		 <view class="form-item">
		   <text class="label">活动组团人数</text>
		   <input class="input" v-model="form.clusterNumber" placeholder="请输入活动组团人数" />
		 </view>

		 <view class="divider"></view>

		<!-- 活动等级 -->
		<view class="form-item">
		  <text class="label">活动等级</text>
		  <input class="input" v-model="form.activityGrade" placeholder="请输入活动等级" />
		</view>

		 <view class="divider"></view>

		 <!-- 活动集合地点 -->
		 <view class="form-item">
		   <text class="label">活动集合地点</text>
		   <input class="input" v-model="form.activitAssemblingPlace" placeholder="活动集合地点" />
		 </view>

		  <view class="divider"></view>
         <!-- 活动日期 -->
         <view class="form-item">
           <text class="label">活动日期</text>
           <picker class="picker" mode="date" @change="bindDateChange" :value="form.date">
             <view class="picker">
               {{ form.date }}
             </view>
           </picker>
         </view>

         <view class="divider"></view>

         <!-- 活动结束日期和时间 -->
         <view class="form-item">
           <text class="label">活动结束日期和时间</text>
           <picker class="picker" mode="date" @change="bindTimeChange" :value="form.time">
             <view class="picker">
               {{ form.time }}
             </view>
           </picker>
         </view>

         <view class="divider"></view>

         <!-- 取消报名截止时间 -->
         <view class="form-item">
           <text class="label">取消报名截止时间</text>
           <picker class="picker" mode="date" @change="bindCancelDateChange" :value="form.cancelTime">
             <view class="picker">
               {{ form.cancelTime }}
             </view>
           </picker>
         </view>

         <view class="divider"></view>

         <!-- 活动描述 -->
         <view class="form-item">
           <text class="label">活动描述</text>
           <textarea class="textarea" v-model="form.description" placeholder="请输入活动描述" />
         </view>

         <view class="divider"></view>

         <!-- 添加图片 -->
       <view class="form-item">
         <text class="image-tip">添加图片（最多上传9张）</text>
         <view class="image-list">
           <block v-for="(image, index) in form.images" :key="index">
             <image :src="image" class="image" @load="handleImageLoad" />
           </block>
           <view class="add-image" @click="chooseImage">
             <text class="add-icon">+</text>
           </view>
         </view>
       </view>
       </view>

      <!-- 提交按钮 -->
      <button class="submit-btn" type="primary" style="background-color: #3498db;"  @click="SaveActivtyList()">提交</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'publish',
      form: {
        title: '',
        location: '',
        fieldNumber: '',
        date: '',
        time: '',
        cancelTime: '',
		activityDistance : '',
		signUpNumber : '',
		clusterNumber : '',
		activityGrade : '',
		activitAssemblingPlace : '',
        description: '',
        images: [], // 初始化图片数组
      },

    }
  },
  methods: {
	  SaveActivtyList(){
	  		var that = this;
			var activtyList={
				activityHeadline : that.form.title,
				activityDateTime : that.form.date,
				activityFinishTime : that.form.time,
				activityCancelSignupTime : that.form.cancelTime,
				pathId : that.form.fieldNumber,
				activityDistance :that.form.activityDistance,
				activityPlace : that.form.location,
				activitySignupNumber :that.form.signUpNumber,
				activityClusterNumber : that.form.clusterNumber,
				activityGrade : that.form.activityGrade,
				activitAssemblingPlace : that.form.activitAssemblingPlace,
				activityExplain : that.form.description,
			}
			uni.request({
				url:"/cyclingapplet/activtyList/save",
				method: 'POST',
				data: activtyList,
				success: (res) => {
				    console.log('Data:', res.data);
				},
				fail: (err) => {
				    console.error('Error:', err);
				}

			})


			// console.log("1234567"+that.$axios )
	  // 		that.$axios.post("/cyclingapplet/activtyList/save",{
			// 	"activtyList":activtyList

	  // 		}).then(function(response){

	  // 			}).catch(function(error) {	
	  // 				console.log("==error==============");
	  // 				console.log(error);
	  // 			})
	  },
	  handleImageLoad(e) {
	      console.log('图片加载完成:', e)
	    }  ,
    navigateTo(tab) {
      this.activeTab = tab
      // 根据 tab 值进行页面导航
    },
    bindDateChange(e) {
      console.log('picker发送选择改变，携带值为', e.target.value)
      this.form.date = e.target.value
    },
    bindTimeChange(e) {
      console.log('picker发送选择改变，携带值为', e.target.value)
      this.form.time = e.target.value
    },
    bindCancelDateChange(e) {
      console.log('picker发送选择改变，携带值为', e.target.value)
      this.form.cancelTime = e.target.value
    },
   chooseImage() {
     uni.chooseImage({
       count: 9, // 允许上传的最大图片数量
       sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
       sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
       success: (res) => {
         console.log(res)
         this.form.images = res.tempFilePaths
       }
     })
   },
    submitForm() {
      // 表单验证通过，提交表单
      console.log(this.form)
    },
  },
}
</script>

<style>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
  height: 100vh;
}

.navbar {
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  padding: 10rpx 0;
  border-bottom: 1rpx solid #ccc;
}

.nav-item {
  flex: 1;
  text-align: center;
  padding: 10rpx 0;
  font-size: 28rpx;
  color: #333;
}

.nav-item.active {
  color: #007aff;
  border-bottom: 2rpx solid #007aff;
}

.form {
  background-color: #fff;
  padding: 20rpx;
  border-radius: 10rpx;
  margin-top: 20rpx;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
}

.form-item {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.label {
  font-size: 28rpx;
  color: #333;
  margin-right: 10rpx;
}

.input, .textarea, .picker {
  flex: 1;
  padding: 10rpx;
  border: none;
  border-radius: 5rpx;
  font-size: 28rpx;
  height: 30rpx;
}

.textarea {
  height: 200rpx;
}

.time-picker {
  display: flex;
  align-items: center;
}

.picker {
  flex: 1;
  padding: 10rpx;
  border: none;
  border-radius: 5rpx;
  font-size: 28rpx;
  text-align: center;
  height: 40rpx;
}

.separator {
  margin: 0 10rpx;
  font-size: 28rpx;
  color: #333;
}

.upload-btn {
  background-color: #007aff;
  color: #fff;
  padding: 10rpx 20rpx;
  border-radius: 5rpx;
  text-align: center;
}

.image-tip {
  font-size: 28rpx;
  color: #333;
  margin-right: 10rpx;
  background-color: #007aff;
}

.image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
  margin-top: 10rpx;
}

.image {
  width: 180rpx;
  height: 180rpx;
  border-radius: 10rpx;
  object-fit: cover;
}

.add-image {
  width: 180rpx;
  height: 180rpx;
  border: 1rpx dashed #ccc;
  border-radius: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.add-icon {
  font-size: 40rpx;
  color: #ccc;
}

.submit-btn {
  width: 100%;
  background-color: #007aff;
  color: #fff;
  padding: 20rpx;
  border-radius: 10rpx;
  text-align: center;
  font-size: 32rpx;
  margin-top: 20rpx;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
}

.divider {
  height: 1rpx;
  background-color: #ccc;
  margin: 20rpx 0;
}
</style>
